<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(url,index) in imgs" :key="index" >
          <img
                :src="url"/>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
  </div>
</template>

<script>
// import Swiper JS
import Swiper from "swiper";
// import Swiper styles
import "swiper/css/swiper.min.css";
import axios from "axios";

export default {
  name: "Banner",
  data(){
    return {
      imgs:[],
      msg:"hi"
    }
  },
  created(){
    axios({
      url:"http://localhost:3000/bannerImgs"
    })
    .then(res=>{
      console.log("后端响应回来了");
      this.imgs = res.data;
      //简单粗暴的理解：此处的$nextTick等价于 imgs引起的updated;      
      this.$nextTick(()=>{
        this.crateSwiper();
      })
      // 深入响应式的原理：
      // vue2中，当数据改变时，并不会理解更新dom。而是会把数据引起的dom更新放在一个异步更新队列里进行排队。
      //         等到下次事件循环更新队列时,才会执行队列的代码(进行dom的处理)，这样的话，意味着程序员没法在更新数据后，使用新的dom
      //         所以,vue提供了一个$nextTick()，只需要程序员把操作新dom的代码传给$nextTick，$nextTick()内部会在dom重新渲染之后，调用传入的代码

    })
  },
  // updated:function(){
  //     this.crateSwiper();
  // },
  methods:{
    crateSwiper(){
      const swiper = new Swiper(".swiper-container",{
      loop:true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    }
  }
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 160px;
  background-color: skyblue;
}

.swiper-slide,img{
  width: 100%;
  height:100%
}
</style>